import TableRowDelButton from '@/components/BizButtons/TableRowDelButton';
import TableRowEditButton from '@/components/BizButtons/TableRowEditButton';
import useActionControl from '@/hooks/useActionControl';
import SystemDictDataEditModal from '@/pages/system/dictData/components/SystemDictDataEditModal';
import ApiSystemDictData from '@/services/system/ApiSystemDictData';
import { ProTable } from '@ant-design/pro-components';
import { Tag } from 'antd';
import ButtonGroup from 'antd/es/button/button-group';

const SystemDictDataIndex = () => {
  const actionControl = useActionControl({
    addAction: {
      onActionCall: (values) => ApiSystemDictData.add(values),
    },
    editAction: {
      onModalOpen: (values) => ApiSystemDictData.detail(values.dictCode),
      onActionCall: (values) => ApiSystemDictData.edit(values),
    },
    extraActionMap: {
      remove: {
        onActionCall: (values) => ApiSystemDictData.remove(values.dictCode),
      },
    },
  });

  actionControl.queryParams.refill();

  return (
    <div>
      <ProTable
        {...actionControl.table}
        request={async (params) => {
          const data = await ApiSystemDictData.list(params);
          return {
            data: data.rows,
            success: true,
            total: data.total,
          };
        }}
        rowKey={'dictCode'}
        columns={[
          { title: '字典类型', dataIndex: 'dictType' },
          { title: '字典编码', dataIndex: 'dictCode' },
          { title: '字典标签', dataIndex: 'dictLabel' },
          { title: '字典键值', dataIndex: 'dictValue' },
          {
            title: '状态',
            dataIndex: 'status',
            valueEnum: {
              '0': <Tag color={'green'}>正常</Tag>,
              '1': <Tag color={'red'}>停用</Tag>,
            },
          },
          {
            title: '备注',
            dataIndex: 'remark',
            ellipsis: true,
            hideInSearch: true,
          },
          { title: '创建时间', dataIndex: 'createTime', hideInSearch: true },
          {
            title: '操作',
            hideInSearch: true,
            render: (text, record) => [
              <ButtonGroup key={'operations'}>
                <TableRowEditButton
                  actionControl={actionControl}
                  record={record}
                />
                <TableRowDelButton
                  actionControl={actionControl}
                  record={record}
                />
              </ButtonGroup>,
            ],
          },
        ]}
      />

      <SystemDictDataEditModal {...actionControl.editModal} />
    </div>
  );
};

export default SystemDictDataIndex;
